<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>排行榜</title>
		<meta name="viewport" content="width=640,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/common/common.css" />
		<link rel="stylesheet" type="text/css" href="css/my_animate.css" />
		<link rel="stylesheet" type="text/css" href="css/ranking.css" />
	</head>

	<body>
		<div class="web ranking">
			<div class="yinye rotate360">
				<img src="images/index/music_ico.png" />
			</div>
			<audio src="audio/1.mp3" class="audio" autoplay="autoplay" loop="loop"></audio>
			<div class="top">
				<div class="btn_mask"></div>
				<img src="images/ranking/xyphb.png" />
			</div>
			<div class="center">
				<div class="mypaiming hid">
					<div class="num">1000</div>
					<div class="img"><img src="images/common/melon.jpg" /></div>
					<div class="name">melon</div>
					<div class="shu">1000位宾客</div>
				</div>
				<ul class="p_h_bang">
					<li class="clearfix">
						<div class="num">1<em></em></div>
						<div class="img"><img src="images/add_table.png" /></div>
						<div class="name">XXXX</div>
						<div class="shu">1130位宾客</div>
					</li>
					<li class="clearfix">
						<div class="num">2<em></em></div>
						<div class="img"><img src="images/add_table.png" /></div>
						<div class="name">XXXX</div>
						<div class="shu">30位宾客</div>
					</li>
					<li class="clearfix">
						<div class="num">3<em></em></div>
						<div class="img"><img src="images/add_table.png" /></div>
						<div class="name">XXXX</div>
						<div class="shu">30位宾客</div>
					</li>
					<li class="clearfix">
						<div class="num">4</div>
						<div class="img"><img src="images/add_table.png" /></div>
						<div class="name">XXXX</div>
						<div class="shu">30位宾客</div>
					</li>
				</ul>
			</div>
			<div class="index">
				<a href="index.html">
					<img src="images/common/home.png" />
				</a>
			</div>

		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$.ajax({
				type: "get",
				url: "json/shengfen.js",
				dataType: "json",
				success: function(res) {
					var shengfen;
					shengfen = res.shengfen;
					load(shengfen);
				}
			});

			function load(shengfen) {
				if(shengfen == "pengyou") {
					$(document).ready(function() {
						$(".mypaiming").css("display","none");
					})
				} else if(shengfen == "zhuren") {
					$(document).ready(function() {
						$(".mypaiming").css("display","block");
					})
				}
			}
			var guests = [
				{ id: "1", name: "王重阳", pic: "images/pic/1.jpg" },
				{ id: "2", name: "周伯通", pic: "images/pic/2.jpg" },
				{ id: "3", name: "欧阳峰欧阳峰欧阳峰欧阳峰欧阳峰欧阳峰欧阳峰欧阳峰欧阳峰欧阳峰", pic: "images/pic/3.jpg" },
				{ id: "4", name: "黄蓉", pic: "images/pic/4.jpg" },
				{ id: "5", name: "郭靖", pic: "images/pic/5.jpg" },
				{ id: "6", name: "黄药师", pic: "images/pic/6.jpg" },
				{ id: "7", name: "杨过", pic: "images/pic/7.jpg" },
				{ id: "8", name: "小龙女", pic: "images/pic/8.jpg" },
				{ id: "9", name: "令狐冲", pic: "images/pic/9.jpg" },
				{ id: "10", name: "独孤求败", pic: "images/pic/10.jpg" },
				{ id: "11", name: "西门吹雪", pic: "images/pic/11.jpg" },
				{ id: "12", name: "陆小凤", pic: "images/pic/12.jpg" },
				{ id: "13", name: "李白", pic: "images/pic/13.jpg" },
				{ id: "14", name: "杜甫", pic: "images/pic/14.jpg" },
				{ id: "15", name: "白居易", pic: "images/pic/15.jpg" },
				{ id: "16", name: "东方不败", pic: "images/pic/16.jpg" },
				{ id: "17", name: "李清照", pic: "images/pic/17.jpg" },
				{ id: "1", name: "王重阳", pic: "images/pic/1.jpg" },
				{ id: "2", name: "周伯通", pic: "images/pic/2.jpg" },
				{ id: "3", name: "欧阳峰", pic: "images/pic/3.jpg" },
				{ id: "4", name: "黄蓉", pic: "images/pic/4.jpg" },
				{ id: "5", name: "郭靖", pic: "images/pic/5.jpg" },
				{ id: "6", name: "黄药师", pic: "images/pic/6.jpg" },
				{ id: "7", name: "杨过", pic: "images/pic/7.jpg" },
				{ id: "8", name: "小龙女", pic: "images/pic/8.jpg" },
				{ id: "9", name: "令狐冲", pic: "images/pic/9.jpg" },
				{ id: "10", name: "独孤求败", pic: "images/pic/10.jpg" },
				{ id: "11", name: "西门吹雪", pic: "images/pic/11.jpg" },
				{ id: "12", name: "陆小凤", pic: "images/pic/12.jpg" },
				{ id: "13", name: "李白", pic: "images/pic/13.jpg" },
				{ id: "14", name: "杜甫", pic: "images/pic/14.jpg" },
				{ id: "15", name: "白居易", pic: "images/pic/15.jpg" },
				{ id: "16", name: "东方不败", pic: "images/pic/16.jpg" },
				{ id: "17", name: "李清照", pic: "images/pic/17.jpg" },
				{ id: "1", name: "王重阳", pic: "images/pic/1.jpg" },
				{ id: "2", name: "周伯通", pic: "images/pic/2.jpg" },
				{ id: "3", name: "欧阳峰", pic: "images/pic/3.jpg" },
				{ id: "4", name: "黄蓉", pic: "images/pic/4.jpg" },
				{ id: "5", name: "郭靖", pic: "images/pic/5.jpg" },
				{ id: "6", name: "黄药师", pic: "images/pic/6.jpg" },
				{ id: "7", name: "杨过", pic: "images/pic/7.jpg" },
				{ id: "8", name: "小龙女", pic: "images/pic/8.jpg" },
				{ id: "9", name: "令狐冲", pic: "images/pic/9.jpg" },
				{ id: "10", name: "独孤求败", pic: "images/pic/10.jpg" },
				{ id: "11", name: "西门吹雪", pic: "images/pic/11.jpg" },
				{ id: "12", name: "陆小凤", pic: "images/pic/12.jpg" },
				{ id: "13", name: "李白", pic: "images/pic/13.jpg" },
				{ id: "14", name: "杜甫", pic: "images/pic/14.jpg" },
				{ id: "15", name: "白居易", pic: "images/pic/15.jpg" },
				{ id: "16", name: "东方不败", pic: "images/pic/16.jpg" },
				{ id: "17", name: "李清照", pic: "images/pic/17.jpg" },
				{ id: "1", name: "王重阳", pic: "images/pic/1.jpg" },
				{ id: "2", name: "周伯通", pic: "images/pic/2.jpg" },
				{ id: "3", name: "欧阳峰", pic: "images/pic/3.jpg" },
				{ id: "4", name: "黄蓉", pic: "images/pic/4.jpg" },
				{ id: "5", name: "郭靖", pic: "images/pic/5.jpg" },
				{ id: "6", name: "黄药师", pic: "images/pic/6.jpg" },
				{ id: "7", name: "杨过", pic: "images/pic/7.jpg" },
				{ id: "8", name: "小龙女", pic: "images/pic/8.jpg" },
				{ id: "9", name: "令狐冲", pic: "images/pic/9.jpg" },
				{ id: "10", name: "独孤求败", pic: "images/pic/10.jpg" },
				{ id: "11", name: "西门吹雪", pic: "images/pic/11.jpg" },
				{ id: "12", name: "陆小凤", pic: "images/pic/12.jpg" },
				{ id: "13", name: "李白", pic: "images/pic/13.jpg" },
				{ id: "14", name: "杜甫", pic: "images/pic/14.jpg" },
				{ id: "15", name: "白居易", pic: "images/pic/15.jpg" },
				{ id: "16", name: "东方不败", pic: "images/pic/16.jpg" },
				{ id: "17", name: "李清照", pic: "images/pic/17.jpg" },
				{ id: "1", name: "王重阳", pic: "images/pic/1.jpg" },
				{ id: "2", name: "周伯通", pic: "images/pic/2.jpg" },
				{ id: "3", name: "欧阳峰", pic: "images/pic/3.jpg" },
				{ id: "4", name: "黄蓉", pic: "images/pic/4.jpg" },
				{ id: "5", name: "郭靖", pic: "images/pic/5.jpg" },
				{ id: "6", name: "黄药师", pic: "images/pic/6.jpg" },
				{ id: "7", name: "杨过", pic: "images/pic/7.jpg" },
				{ id: "8", name: "小龙女", pic: "images/pic/8.jpg" },
				{ id: "9", name: "令狐冲", pic: "images/pic/9.jpg" },
				{ id: "10", name: "独孤求败", pic: "images/pic/10.jpg" },
				{ id: "11", name: "西门吹雪", pic: "images/pic/11.jpg" },
				{ id: "12", name: "陆小凤", pic: "images/pic/12.jpg" },
				{ id: "13", name: "李白", pic: "images/pic/13.jpg" },
				{ id: "14", name: "杜甫", pic: "images/pic/14.jpg" },
				{ id: "15", name: "白居易", pic: "images/pic/15.jpg" },
				{ id: "16", name: "东方不败", pic: "images/pic/16.jpg" },
				{ id: "17", name: "李清照", pic: "images/pic/17.jpg" },
				{ id: "1", name: "王重阳", pic: "images/pic/1.jpg" },
				{ id: "2", name: "周伯通", pic: "images/pic/2.jpg" },
				{ id: "3", name: "欧阳峰", pic: "images/pic/3.jpg" },
				{ id: "4", name: "黄蓉", pic: "images/pic/4.jpg" },
				{ id: "5", name: "郭靖", pic: "images/pic/5.jpg" },
				{ id: "6", name: "黄药师", pic: "images/pic/6.jpg" },
				{ id: "7", name: "杨过", pic: "images/pic/7.jpg" },
				{ id: "8", name: "小龙女", pic: "images/pic/8.jpg" },
				{ id: "9", name: "令狐冲", pic: "images/pic/9.jpg" },
				{ id: "10", name: "独孤求败", pic: "images/pic/10.jpg" },
				{ id: "11", name: "西门吹雪", pic: "images/pic/11.jpg" },
				{ id: "12", name: "陆小凤", pic: "images/pic/12.jpg" },
				{ id: "13", name: "李白", pic: "images/pic/13.jpg" },
				{ id: "14", name: "杜甫", pic: "images/pic/14.jpg" },
				{ id: "15", name: "白居易", pic: "images/pic/15.jpg" },
				{ id: "16", name: "东方不败", pic: "images/pic/16.jpg" },
				{ id: "17", name: "李清照", pic: "images/pic/17.jpg" },
				{ id: "1", name: "王重阳", pic: "images/pic/1.jpg" },
				{ id: "2", name: "周伯通", pic: "images/pic/2.jpg" },
				{ id: "3", name: "欧阳峰", pic: "images/pic/3.jpg" },
				{ id: "4", name: "黄蓉", pic: "images/pic/4.jpg" },
				{ id: "5", name: "郭靖", pic: "images/pic/5.jpg" },
				{ id: "6", name: "黄药师", pic: "images/pic/6.jpg" },
				{ id: "7", name: "杨过", pic: "images/pic/7.jpg" },
				{ id: "8", name: "小龙女", pic: "images/pic/8.jpg" },
				{ id: "9", name: "令狐冲", pic: "images/pic/9.jpg" },
				{ id: "10", name: "独孤求败", pic: "images/pic/10.jpg" },
				{ id: "11", name: "西门吹雪", pic: "images/pic/11.jpg" },
				{ id: "12", name: "陆小凤", pic: "images/pic/12.jpg" },
				{ id: "13", name: "李白", pic: "images/pic/13.jpg" },
				{ id: "14", name: "杜甫", pic: "images/pic/14.jpg" },
				{ id: "15", name: "白居易", pic: "images/pic/15.jpg" },
				{ id: "16", name: "东方不败", pic: "images/pic/16.jpg" },
				{ id: "17", name: "李清照", pic: "images/pic/17.jpg" }
			];
			$(".center ul").animate({ "height": "100%" }, 500);
			//加载数据库
			(function() {
				for(var i = 0; i < guests.length - 4 && i < 96; i++) {
					var $li = $(".p_h_bang li:eq(3)").clone();
					$(".p_h_bang").append($li);
				}
				$(".p_h_bang li").each(function(i) {
					if (i>2) {
						$(this).children(".num").html(i + 1);
					}
					$(this).children(".name").html(guests[i].name);
					$(this).children(".img").children("img").attr("src", guests[i].pic);
				})
			})();
		</script>
	</body>

</html>